<template>
  <!-- 新增编辑的组件 -->
  <el-dialog
    :title="showText"
    :visible.sync="addEditShow"
    width="60%"
    @close="cancelBtn"
  >
    <el-form ref="ruleForm" :model="articlerelate" :rules="rules">
      <el-form-item label="文章标题:" label-width="120px" prop="title">
        <el-input
          v-model="articlerelate.title"
          autocomplete="off"
          placeholder="请输入文章的标题"
        />
      </el-form-item>
      <el-form-item label="文章内容:" label-width="120px" prop="articleBody">
        <quill-editor
          ref="myQuillEditor"
          v-model="articlerelate.articleBody"
          class="editor"
          :options="editorOption"
          style="height: '400px'"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        />
      </el-form-item>
      <el-form-item label="视频地址:" label-width="120px" prop="videoURL">
        <el-input
          v-model="articlerelate.videoURL"
          autocomplete="off"
          placeholder="请输入视频地址"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-row display="flex" justify="end">
        <el-col>
          <el-button @click="cancelBtn">取 消</el-button>
          <el-button type="primary" @click="confirmBtn">确 定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
// 引入富文本组件
import { quillEditor } from 'vue-quill-editor'

// 引入相关方法
import { add, update, detail } from '../../../api/hmmm/articles'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote', 'code-block'],
  ['image', 'link']
]
export default {
  components: {
    quillEditor
  },
  props: {
    addEditShow: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      articlerelate: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      uniqueId: 'uniqueId',
      content: '', // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions

        },
        theme: 'snow',
        placeholder: '请输入正文'
      }

    }
  },
  computed: {
    showText() {
      return this.row ? '编辑文章' : '新增文章'
    }
  },
  methods: {
    async detailfn() {
      // console.log(this.row)
      const { data } = await detail(this.row)
      this.articlerelate = data
      // console.log(this.articlerelate)
    },
    confirmBtn() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.row) {
            await update(this.articlerelate)
          } else {
            await add(this.articlerelate)
          }
          this.$parent.getArticleList()
          this.cancelBtn()
        } else {
          this.$message('请稍后重试')
        }
      })
    },
    cancelBtn() {
      this.$emit('update:addEditShow', false)
      this.articlerelate = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$refs.ruleForm.resetFields()
      this.$emit('update:row', null)
    },
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange() {}
  }
}
</script>

<style scoped>
.editor {
  height: 200px;
  margin-bottom: 50px;
}
</style>
